<template>
    <!-- 顶部导航 -->
    <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="$router.back()">
        <!-- 右上角的...   点击弹出3个选项 -->
        <template #right>
            <van-popover v-model:show="showPopover" theme="dark" :actions="actions" placement="bottom-end"
                @select="selectOption">
                <template #reference>
                    <van-icon name="ellipsis" size="24" />
                </template>
            </van-popover>
        </template>
    </van-nav-bar>

    <!-- 分享面板 -->
    <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />

    <!-- 商品详情 -->
    <div>
        <div class="swip">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#39a9ed">
                <van-swipe-item>1</van-swipe-item>
                <van-swipe-item>2</van-swipe-item>
                <van-swipe-item>3</van-swipe-item>
                <van-swipe-item>4</van-swipe-item>
            </van-swipe>

        </div>
    </div>

    <!-- 底部 -->
    <van-action-bar>
        <!-- <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" /> -->
        <van-action-bar-icon icon="cart-o" to="/cart" text="购物车" />
        <!-- <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" /> -->
        <van-action-bar-button type="warning" text="加入购物车" />
        <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
</template>
 
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { showToast } from 'vant'
import { getProDetail } from '@/api/pro.js'
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';


const router = useRouter()
const route = useRoute()

const showShare = ref(false);

onMounted(() => {
    console.log(route.params,333);    
    getProDetail({proid:route.params.id}).then((res)=>{
        console.log(res,444);
        
    })
})



// 弹出图标 显示的内容
const showPopover = ref(false);
const actions = [
    { icon: 'home-o', path: '/', text: '首页' },
    { icon: 'cart-o', path: '/cart', text: '购物车' },
    { icon: 'share-o', path: 'share', text: '分享' },
];

// 分享  显示的内容
const options = [
    { name: '微信', icon: 'wechat' },
    { name: '微博', icon: 'weibo' },
    { name: '复制链接', icon: 'link' },
    { name: '分享海报', icon: 'poster' },
    { name: '二维码', icon: 'qrcode' },
];

const selectOption = (action) => {
    // showToast(action.text);
    if (action.text == '首页') {
        router.push('/')
    } else if (action.text == '购物车') {
        router.push('/cart')
    } else {
        showShare.value = true
    }
}

const onSelect = (option) => {
    showToast(option.name);
    showShare.value = false;
};

</script>
 
<style scoped lang="scss">

.my-swipe .van-swipe-item {
    color: red;
    font-size: 20px;
    line-height: 300px;
    text-align: center;
    background-color: #fff;
  }
  </style>